<template>
	<div class="goods">
		<div class="menu-wrapper" ref="menu">
			<ul>
				<li v-for="(item,index) in goods" @click="selectMenu(index,$event)" class="menu-item" :class="{'current':currentIndex===index}">
					<div class="padd">
						<span class="goods_icon text"><v-icon :icon_type='item.type' :icon_num='3'></v-icon>{{item.name}}</span>
					</div>
				</li>
			</ul>
		</div>
		<div class="foods-wrapper" ref="foods">
			<ul>
				<li v-for="item in goods" class="food-list food-list-hook">
					<h1 class="title">{{item.name}}</h1>
					<ul>
						<li v-for="food in item.foods" @click="selectFood(food,$event)" class="food-item">
							<div class="icon">
								<img :src="food.icon"/>
							</div>
							<div class="content">
								<h2 class="name">{{food.name}}</h2>
								<p class="desc">{{food.description}}</p>
								<div class="extra">
									<span>月售{{food.sellCount}}</span>
									<span>好评率{{food.rating}}%</span>
								</div>
								<div class="price">
									<span class="newprice">￥{{food.price}}</span>
									<span v-show="food.oldPrice" class="oldprice"> <del>￥{{food.oldPrice}}</del> </span>
								</div>
								<div class="cartcontrol_box">
									<v-cartcont :food="food"></v-cartcont>
								</div>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!--底部购物车-->
		<v-shopcart ref='shopcart' :select-foods='selectFoods()' :delevery-price='seller.deliveryPrice' :min-price="seller.minPrice"></v-shopcart>
			
		<!--食品详情页-->
		<v-food ref='seleted' :food='selectedFood'></v-food>
	</div>
</template>

<script>
	import icon from '../public/icon.vue'
	import cartcont from '../public/cartcontrol.vue'
	import shopcart from '../shopcart/shopcart.vue'
	import foodDetail from '../foodDetail/foodDetail.vue'
	import Bscroll from 'better-scroll'
	/* better-scroll的必要条件
	 * new Bscroll(this.$refs.menu,{click:true});
	 * 里面的元素，是滚动的父级元素(外层),必须设置属性(例如：高度上不能超过屏幕，或者宽度不超过屏幕)，其子元素(内层)无限制
	 * 这个元素的子元素，包裹整个可以滚动的部分(内层)
	 * 内层高度一定大于外层的高度，才能滚动
	 * */
	const DATA_OK = true;
	export default{
		props:{
			seller:{
				type: Object
			}
		},
		data(){
			return{
				goods:[],
				listHeight: [],
				scrollY: '',
				selectedFood: {}/*选中的某个食物*/
			}
		},
		computed:{
			currentIndex(){
				for(let i=0;i<this.listHeight.length;i++){
					let height1 = this.listHeight[i];
					let height2 = this.listHeight[i+1];
					if(!height2 || this.scrollY>=height1 && this.scrollY<height2){
						return i
					}
				}
				return 0;
			}
		},
		created(){
	  		this.classMap = ['decrease','discount','invoice','special','guarantee']
			this.$http.get('./api/goods').then(function(response){
				if(response.ok == DATA_OK){
	  				this.goods = response.body.data;
	  				/*在操作与DOM相关的东西的时候，一定要保证DOM已经渲染*/
	  				this.$nextTick(()=>{
	  					this._initScroll();
	  					this._caculateHeight();
	  				})
				}
			});
		},
	  	methods:{
	  		selectFood(food,event){
	  			if(!event._constructed){
	  				return;
	  			}
	  			this.selectedFood = food;
	  			this.$refs.seleted.showDetail()
	  		},
	  		selectMenu(_index,event){
	  			if(!event._constructed){
	  				/*Bscroll会在touchstart等事件中prevent其他事件的发生
	  				* 该步骤判断是否是Bscroll派发的事件，阻止默认浏览器的事件，
	  				* 因为pc端浏览器会执行一次，Bscroll又会派发一次，防止在PC端重复执行*/
	  				return;
	  			}
	  			let foodList = this.$refs.foods.getElementsByClassName('food-list-hook');
	  			let el = foodList[_index];
	  			let height = this.listHeight[_index];
	  			this.foodsSroll.scrollToElement(el, 300)
	  		},
	  		_initScroll(){
	  			this.menuScroll = new Bscroll(this.$refs.menu,{
	  				click:true
	  			});
	  			this.foodsSroll = new Bscroll(this.$refs.foods,{
	  				probeType:3,
	  				click:true
	  			})
	  			this.foodsSroll.on('scroll',(pos)=>{
	  				this.scrollY = Math.abs(Math.round(pos.y))
	  			})
	  		},
	  		_caculateHeight(){
	  			let foodList = this.$refs.foods.getElementsByClassName('food-list-hook');
	  			let height=0;
	  			this.listHeight.push(height);
	  			for(let i=0;i<foodList.length;i++){
	  				let item = foodList[i];
	  				height+=item.clientHeight;
	  				this.listHeight.push(height);
	  			}
	  		},
	  		selectFoods(){/*选中的food，与购物车息息相关*/
	  			let foods=[];
	  			this.goods.forEach((good)=>{
	  				good.foods.forEach((food)=>{
	  					if(food.count){
	  						foods.push(food);
	  					}
	  				})
	  			})
	  			return foods;
	  		},
	  		/*_drop(target){
	  			console.log(target)
	  			this.$refs.shopcart.drop(target);
	  		}*/
	  	},
	  	components:{
	  		'v-icon': icon,
	  		'v-shopcart': shopcart,
	  		'v-cartcont':cartcont,
	  		'v-food':foodDetail
	  	}
	}
</script>

<style lang="stylus">
	.goods{
		display: flex
	    position: absolute
	    top: 179px
	    bottom: 46px
	    width: 100%
	    overflow: hidden
		/*position: relative;
		overflow: hidden;
		width: 100%;
		display: flex;*/
	}
	.menu-wrapper{
		flex: 0 0 80px;
		width: 80px;
		background: #f3f5f7;
		font-size: 12px;
		.menu-item{
			margin: 0 auto;
			height: 54px;
			padding: 0 19px;
			line-height: 14px;
			/*color: rgb(240,20,20);*/
			.padd{
				width: 56px;
				height: 100%;
				display: table;
				border-bottom: 1px solid rgba(7,17,27,0.1);
			}
			&.current{
				background: #fff;
				font-weight: 700;
				.padd{
					border-bottom:none;
				}
			}
			.text{
				font-size: 12px;
				display: table-cell;
				/*width: 56px;*/
				vertical-align: middle;
			}
			.goods_icon{
				display: table-cell;
			}
		}
	}
	.foods-wrapper{
		flex: 1;
	}
	.food-list{
		.title{
			height: 26px;
			line-height: 26px;
			background: #f3f5f7;
			border-left: 2px solid #d9dde1;
			font-size: 12px;
			color: rgb(147,153,159);
			padding-left: 14px;
		}
		.food-item{
			display: flex;
			margin: 0 18px;
			padding: 18px 0;
			border-top: 1px solid rgba(7,17,27,0.1);
			&:nth-child(1){
				border-top:none;
			}
			.icon{
				width:57px;
				margin-right: 10px;
				img{
					width: 100%;
				}
			}
			.content{
				flex: 1;
				position: relative;
				.cartcontrol_box{
					position: absolute;
					right: 0;
					bottom: 0;
				}
				.name{
					font-size: 12px;
					line-height: 14px;
					margin-top: 2px;
					color: rgb(7,17,27);
				}
				.desc,.extra{
					margin: 8px 0;
					font-size: 10px;
					color: rgb(147,153,159);
					line-height: 16px;
				}
				
			}
		}
	}
	.price{
		.newprice{
			font-size: 14px;
			color: rgb(240,20,20);
			font-weight: 700;
			margin-right: 8px;
		}
		.oldprice{
			font-size: 10px;
			font-weight: 700;
			color: #93999f;
		}
	}
</style>